<template>
  <div class="inner">
    <div v-if="show">
      <div v-if="$route.query.orderId == '文博课堂'" class="title">
        <p>文博课堂</p>
      </div>

      <div v-if="$route.query.orderId == '青少年活动'" class="title">
        <p>青少年活动</p>
      </div>
      <div>
        <div class="center">
          <!-- 2中间列表 -->
          <div class="second_content">
            <ul>
              <li @click="look(item.id)" v-for="(item, index) of currentPageData" :key="index">
                <p>
                  {{
                  item.title.length > 50
                  ? item.title.substr(1, 50) + "..."
                  : item.title
                  }}
                  <span
                    class="huodong_bg"
                  ></span>
                </p>

                <span>{{ item.inputtime.slice(0, 10) }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 3底部分页 -->
        <div class="block" id="page">
          <el-pagination
            v-if="totalRow != 0"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :pager-count="5"
            :page-size="pageSize"
            layout="  prev, pager, next"
            :total="totalRow"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- <huodongyugao2detail v-else :lookUrl="lookUrl"></huodongyugao2detail> -->
  </div>
</template>
<script>
// import huodongyugao2detail from "./huodongyugao2detail";
var dataUrl, newsUrl;
export default {
  data() {
    return {
      // message: [{}],

      i: "",
      lid: "",
      newxx: [{}], //顶部最新消息
      show: true, //控制列表页喝详情页的显示隐藏
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 15, // 每页显示数量
      currentPageData: [],
      totalRow: 0,
    };
  },
  props: ["id"],

  created() {
    this.setCurrentPageData();
  },

  methods: {
    //接口1顶部最新消息
    // news() {
    //   this.$api.get(`${this.tableList}wenboketang-1-1000000`).then((res) => {
    //     this.newxx = res.data.page.list;
    //   });
    // },
    // 接口2 中间列表的 fenye数据---------------------------------
    setCurrentPageData() {
      this.$api
        .get(
          `${this.tableList}${this.$router.history.current.query.ketang}-${this.currentPage}-${this.pageSize}`
        )
        .then((res) => {
          this.totalRow = res.data.page.totalRow;
          this.currentPageData = res.data.page.list;
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
        console.log(val);
      }

      // this.page = val;
      this.setCurrentPageData(
        `${this.tableList}${this.$router.history.current.query.ketang}-${this.currentPage}-${this.pageSize}`
      );
    },

    //通过判断菜单路由穿来的参数判断 用哪个接口往详情页传参url
    look(id) {
      if (this.$router.history.current.query.ketang == "wenboketang") {
        this.sort = 34;
      } else if (
        this.$router.history.current.query.ketang == "qingshaonianhuodong"
      ) {
        this.sort = 36;
      }
      this.$router
        .push({
          path: `/huodongyugao/wenboketangdetail?id=${id}`,
          query: {
            orderId: this.$router.history.current.query.orderId,
            sort: this.sort,
          },
        })
        .catch((err) => {
          err;
        });
    },
  },

  watch: {
    $route(to, from) {
      if (
        to.query.ketang == "wenboketang" ||
        to.query.ketang == "qingshaonianhuodong"
      ) {
        this.currentPage = 1;

        this.setCurrentPageData();
      }
    },
  },
};
</script>
<style scoped>
.gwgk.content {
  display: flex;
  justify-content: space-between;
  color: #4e4b4b;
  max-width: 1200px;
  font-size: 24px;
  margin: auto;
  line-height: 40px;
  padding-top: 90px;
  box-sizing: border-box;
}
.title > p {
  padding-left: 35px;
  margin-bottom: 10px;
}
.gwgk .title {
  font-size: 30px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .right {
  background: rgb(230, 230, 230);
  width: 980px;
  height: 1190px;
  padding: 0 30px 0;
  box-sizing: border-box;
}

.right .inner .more {
  color: white;
  background: #4e69a1;
  width: 195px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}

.right .inner {
  padding-top: 5px;
  padding-bottom: 80px;
}
.right .inner .main_content {
  display: flex;
  padding: 30px 35px 20px;
}
.second_content {
  height: 592px;
}
.right .inner .second_content li {
  display: flex;
  padding: 25px 35px 15px;
  cursor: pointer;
  width: 900px;
  font-size: 16px;
  box-sizing: border-box;
  justify-content: space-between;
  border-top: 1px solid rgb(216, 216, 216);
  color: black;
  position: relative;
}
.right .inner .second_content li:first-child > p {
  background: url("../../assets/image/activity/huodong.png") no-repeat right;

  padding-right: 50px;
}

.right .inner .second_content li:last-child {
  border-bottom: 1px solid rgb(216, 216, 216);
}
.bread {
  max-width: 1150px;
  margin: auto;
  height: 60px;
}
/*馆务公开 新闻咨询 */
.gwgk span {
  display: block;
}
.title_top {
  text-align: center;
}
.xwzx_title {
  color: #060606;
  font-size: 24px;
  margin-top: 20px;
}
.xwzx_second_title {
  font-size: 16px;
  color: #3e3e3e;
  margin-bottom: 10px;
}

.ziti {
  font-size: 16px;
  color: #666666;
}
/* fenye */
#page {
  text-align: center;
  margin-top: 65px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 25px;
  height: 25px;
  border-radius: 2px;
  cursor: pointer;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
